import React, { useState, useEffect } from 'react'
import "../../css/Donation.scss"
import { NavBar } from 'antd-mobile'
import { useLocation } from 'react-router-dom'
import { ItemDonation } from '../../service/DonationService'

export default function DonationItem() {
  const state = useLocation().state.itemId;
  const [itemDateils, setitemDateils] = useState([])

  const serach = async () => {
    let res = await ItemDonation(state);
    setitemDateils(res.data.rows)
    console.log(res, res.data, res.data.rows, "res");


  }

  const back = () => {
    window.history.back()
  }

  useEffect(() => {
    serach();
  }, [])
  return (
    <div className='Donation'>
      <div className='Donation-top'>
        <NavBar back='捐助记录' onBack={back}></NavBar>
      </div>
      <ul className='itemRecordList'>
        {itemDateils.map((item: any) => {
          return <li>
            <div>捐款记录ID:{item.id}</div>
            <div>公益活动ID:{item.activityId}</div>
            <div>捐助人ID:{item.userID}</div>
            <div>捐助用户名字:{item.userName}</div>
            <div>公益活动名字:{item.activityName}</div>
            <div>捐款金额:{item.donateMoney}</div>
          </li>
        })}
      </ul>
      <div className='my-donate' onClick={() => {

      }}>捐助这个项目</div>
    </div >
  )
}
